<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../jquery-3.4.1.js"></script>
    <style>
        p {
            color: red;
        }

        div {
            width: 200px;
            height: 100px;
            background-color: yellow;
            color: red;
        }
        a{
            display: block
        }
    </style>
</head>
<body>
    <h2>animate(下)</h2>
    <p>慕课网,专注分享</p>
    <div id="aaron">内部动画</div>
    点击观察动画效果：
    <select id="animation">
        <option value="1">动画step动画</option>
        <option value="2">动画progress回调</option>
    </select>
    <a></a>
    <input id="exec" type="button" value="执行动画">
</body>
<script>
    /*
    * step：规定每个动画的每一步完成之后要执行的函数
    * progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
    */
    $("#exec").click(function() {
        var v = $("#animation").val();
        var $aaron = $("#aaron");
        if (v == "1") {
            //观察每一次动画的改变
            $aaron.animate({
                height: '50'
            }, {
                duration :1000,
                //每一步动画都会调用
                step: function(now, fx) {
                    $aaron.text('高度的改变值:'+now)
                }
            })
        } else if (v == "2") {
            //观察每一次进度的变化
            $aaron.animate({
                height: '50'
            }, {
                duration :2000,
                //每一步动画完成后调用的一个函数，
                //无论动画属性有多少，每个动画元素都执行单独的函数
                progress: function(now, fx) {
                    console.log(arguments)
                    $aaron.text('进度:'+arguments[1])
                    // var data = fx.elem.id + ' ' + fx.prop + ': ' + now;
                    // alert(data)
                }
            })
        }
        /**
         * .stop(); 停止当前动画，点击在暂停处继续开始
         .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。
         当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
         .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值
         */
    });
</script>
</html>